<script lang="ts" setup>
import type {BannerItem} from "@/types/home";
import {ref} from 'vue'
import type {ImgError} from "@/types/error";
import {ImgErrorType} from "@/enum/imgErrorType";

const activeIndex = ref(0)
const swiperChange: UniHelper.SwiperOnChange = (ev) => {
  // !非空断言
  // activeIndex.value = ev.detail!.current
  activeIndex.value = ev.detail.current
}

withDefaults(defineProps<{
  bannerList: BannerItem[]
}>(), {
  bannerList: () => []
})

/*异常处理*/
//图片拿到链接但加载失败
const emit = defineEmits<{
  imgError: [erroImg: ImgError]
}>()
const errorType = ImgErrorType
const onImgError = (index: number, type: ImgErrorType) => {
  emit('imgError', {index, type})
}
</script>

<template>
  <view class="carousel">
<!--    <swiper :autoplay="true" :circular="true" :interval="3000"
            @change="swiperChange">
      <swiper-item v-for="(item,index) in bannerList" :key="item.id">
        <navigator :url="`/subPkg/detail/detail?id=${item.id}`" class="navigator" hover-class="none">
          <image :mode="item.url===errorType.ERROR_IMG_URL?'aspectFit':'aspectFill'" :src="item.url" class="image"
                 @error="onImgError(index,errorType.SWIPER_IMG_ERROR)"></image>
        </navigator>
      </swiper-item>
    </swiper>-->
<!--    &lt;!&ndash; 指示点 &ndash;&gt;
    <view class="indicator">
      <text
          v-for="(item, index) in bannerList?.length"
          :key="item"
          :class="{ active: index === activeIndex }"
          class="dot"
      ></text>
    </view>-->
  </view>
</template>

<style lang="scss">
/* 轮播图 */
@import 'styles/aw-swiper';
</style>